<template>
  <div>
    <!-- // 数据类型 -->
    <div class="radio" style="margin-left:200px">
      <el-radio-group
        v-model="parameterType"
        size="mini"
        @change="consoleRadio"
      >
        <el-radio label="params" border>params</el-radio>
        <el-radio label="data" border>form-data</el-radio>
        <el-radio label="json" border>json</el-radio>
      </el-radio-group>
    </div>
    <br />
    <el-table
      :data="params"
      border
      style="width: 100%"
      size="mini"
      v-show="parameterType === 'params'"
    >
      <el-table-column label="参数名" width="200">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入参数名"
            clearable
            v-model="scope.row.key"
            size="mini"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="参数值" width="280">
        <template slot-scope="scope">
          <el-autocomplete
            style="width:100%"
            clearable
            size="mini"
            class="inline-input"
            v-model="scope.row.value"
            :fetch-suggestions="querySearch"
            placeholder="随机数：${randomInt}"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </template>
      </el-table-column>

      <el-table-column label="描述" width="200">
        <template slot-scope="scope">
          <el-input clearable v-model="scope.row.desc" size="mini"></el-input>
        </template>
      </el-table-column>

      <!-- // 操作按钮 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="insertTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>

          <el-button
            icon="el-icon-delete"
            size="mini"
            v-show="scope.$index !== 0"
            @click="deleteTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- // 表单数据 -->
    <el-table
      :data="formData"
      border
      style="width: 100%"
      size="mini"
      v-show="parameterType === 'data'"
    >
      <el-table-column label="参数名" width="200">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入参数名"
            clearable
            v-model="scope.row.key"
            size="mini"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="参数值" width="280">
        <template slot-scope="scope">
          <el-autocomplete
            style="width:100%"
            clearable
            size="mini"
            class="inline-input"
            v-model="scope.row.value"
            :fetch-suggestions="querySearch"
            placeholder="随机数：${randomInt}"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </template>
      </el-table-column>

      <el-table-column label="描述" width="200">
        <template slot-scope="scope">
          <el-input clearable v-model="scope.row.desc" size="mini"></el-input>
        </template>
      </el-table-column>

      <!-- // 操作按钮 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="insertTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>

          <el-button
            icon="el-icon-delete"
            size="mini"
            v-show="scope.$index !== 0"
            @click="deleteTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- // json表单 -->
    <div>
      <vue-json-editor
        v-show="parameterType === 'json'"
        v-model="json"
        :mode="'code'"
        lang="zh"
        showButton
        @json-change="onJsonChange"
        @json-save="onJsonSave"
        @has-error="onError"
      >
      </vue-json-editor>
    </div>
  </div>
</template>

<script>
import vueJsonEditor from "vue-json-editor";
import { isEmpty, cloneDeep } from "lodash";
import { getParamsAdvice } from "@/api/config";

export default {
  name: "RequestBody",
  props: ["request"],
  components: {
    vueJsonEditor
  },
  data() {
    return {
      restaurants: [],

      defaultValue: [
        {
          key: "",
          value: "",
          desc: ""
        }
      ],
      params: [],
      formData: [],
      json: "",
      parameterType: "params",
      bodyData: {}
    };
  },
  computed: {},

  created() {
    this.initForm();
    this.loadParamsAdvice();
    console.log(this.restaurants);
  },
  mounted() {},
  methods: {
    // 初始化数据
    initForm() {
      if (isEmpty(this.request)) {
        this.params = this.defaultValue;
        this.formData = this.defaultValue;
      } else {
        if ("params" in this.request) {
          this.params = this.request.params;
          this.formData = this.defaultValue;
          this.json = {};
          this.parameterType = "params";
        }
        if ("data" in this.request) {
          this.formData = this.request.data;
          this.params = this.defaultValue;
          this.json = {};
          this.parameterType = "data";
        }
        if ("json" in this.request) {
          this.json = this.request.json;
          this.params = this.defaultValue;
          this.formData = this.defaultValue;
          this.parameterType = "json";
        }
      }
    },

    initData() {
      this.parameterType = "params";
      this.params = this.defaultValue;
      this.formData = this.defaultValue;
      this.json = {};
    },

    // 传出数据
    emitBody() {
      // 数据只传一种出去，json、params、formData三种选其一
      if (this.parameterType === "json") {
        if (this.json) {
          this.bodyData.json = this.json;
        } else {
          this.bodyData.json = {};
        }
      } else if (this.parameterType === "params") {
        this.bodyData.params = this.params;
      } else {
        this.bodyData.data = this.formData;
      }
      return this.bodyData;
    },

    insertTableRow(index, row) {
      let parameter =
        this.parameterType === "params" ? this.params : this.formData;
      parameter.push({
        key: "",
        value: "",
        desc: ""
      });
    },

    deleteTableRow(index, row) {
      let parameter =
        this.parameterType === "params" ? this.params : this.formData;
      parameter.splice(index, 1);
    },

    consoleRadio() {
      console.log(this.parameterType);
      // this.emitBody();
    },

    onJsonChange(value) {
      console.log("value:", value);
    },
    onJsonSave(value) {
      console.log("value:", value);
    },
    onError(value) {
      console.log("ValueError:", value);
    },

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    loadParamsAdvice() {
      getParamsAdvice()
        .then(res => {
          if (res.data.code == 200) {
            this.restaurants = res.data.result;
          } else {
            console.log("加载参数建议失败22");
          }
        })
        .catch(err => {
          console.log("加载参数建议失败" + err);
        });
    }
  }
};
</script>

<style lang="less"></style>
